import { Component, OnInit, HostBinding } from '@angular/core';
import { RouterModule, Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
import 'rxjs/add/operator/switchMap';

import { slideInDownAnimation } from '../../animations';

@Component({
  selector: 'app-hero-detail',
  template: `
    <p>
      hero-detail Works!
    </p>
    <button (click)='gotoHeroes()'>返回</button>
  `,
  styles: [],
  animations: [slideInDownAnimation]
})
export class HeroDetailComponent implements OnInit {
  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') position = 'absolute';

  hero: Hero;

  constructor(private route: ActivatedRoute, private router: Router, private service: HeroService) { }

  ngOnInit() {
    this.route.paramMap
      .switchMap((params: ParamMap) =>
        this.service.getHero(params.get('id')))
      .subscribe((hero: Hero) =>
        this.hero = hero
      );
  }


  gotoHeroes() {
    const heroId = this.hero ? this.hero.id : null;
    // Pass along the hero id if available
    // so that the HeroList component can select that hero.
    // Include a junk 'foo' property for fun.
    this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
  }

}
